<template>
	<a-row style="padding-bottom: 1vw" type="flex">
		 
		<a-col :span="24" style="text-align: right">
		   <a-space>
               <a-radio-group v-model:value="day" button-style="solid" style="min-width:20vw" @change="changeday">
						<a-radio-button value="0"> 日 </a-radio-button>
						<a-radio-button value="1"> 周 </a-radio-button>
						<a-radio-button value="2"> 月 </a-radio-button>
					</a-radio-group>
                    <a-date-picker v-model:value="datepicker"   v-if="offdate" @change="changedatepicker"/>
                    <a-range-picker v-model:value="rangepicker"  v-if="alldate"  @change="changerangepicker"/>
           </a-space>
					
			 
		</a-col>
	</a-row>
</template>
<script>
 
import {
	defineComponent,
	reactive,
	ref,
	computed,
	onMounted,
	getCurrentInstance,
} from 'vue'
import moment from 'moment'
export default defineComponent({
    props:{
      dateshow:{
          type:Boolean,
          default:function(){
              return false;
          }
      },
      alldateshow:{
          type:Boolean,
          default:function(){
              return false;
          }
      },
      model:{
          type:Object,
          default:function(){
              return {}
          }
      }
    },
    emits:{
        "changedatepicker":null,
       "changeday":null,
       "changerangepicker":null
    },
	setup(props,context) {
        const day=ref("0")
        const datepicker = ref(null)
        const rangepicker = ref([])
	   const offdate = computed(() => {
          return props.dateshow;
      })
	  const alldate =computed(() => {
          return props.alldateshow;
      })
      const changeday=(n)=>{
         if(props.alldateshow){
        context.emit("changeday",{
             type:day.value,
            start_date: rangepicker.value[0]&&moment(rangepicker.value[0]._d).format('YYYY-MM-DD')||null,
            end_date: rangepicker.value[1]&&moment(rangepicker.value[1]._d).format('YYYY-MM-DD')||null
            
        })
         }else{
       context.emit("changeday",{
            type:day.value,
            date:datepicker.value&&moment(datepicker.value._d).format('YYYY-MM-DD')
        })
         }
       
      }
      const changedatepicker=(n)=>{
         context.emit("changedatepicker",{
            type:day.value,
            date:datepicker.value&&moment(datepicker.value._d).format('YYYY-MM-DD')
        })
        
      }
      const changerangepicker=()=>{
          console.log(rangepicker.value)
          context.emit("changerangepicker",{
            type:day.value,
            start_date: rangepicker.value[0]&&moment(rangepicker.value[0]._d).format('YYYY-MM-DD')||null,
            end_date: rangepicker.value[1]&&moment(rangepicker.value[1]._d).format('YYYY-MM-DD')||null
            
        })
      }
		return {
		  offdate,
          alldate,
          changeday,
          day,
          changedatepicker,
          changerangepicker,
          datepicker,
          rangepicker
		}
	}
})
</script>
 